<template>
    <div class="hmp">
        <!--轮播图-->
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item v-for="(v,i) in imglists"><img :src="v.img" alt="" style="width:100%;vertical-align: top">
            </van-swipe-item>
        </van-swipe>
        <!--新品推荐-->
        <div>
            <h2 style="margin: 5px;">新品推荐</h2>
            <div style="display:flex;justify-content: space-between;padding:5px 10px 0 10px;flex-wrap: wrap">
                <div style="width: 48%;
    background: #fff;
    overflow: hidden;
    margin: 5px 0;
    border-radius: 10px;font-size:14px" v-for="v in newa" @click="goodsMsg(v)">
                    <div><img :src="v.thumbnail" alt="" style="width: 100%;"></div>
                    <div style="margin: 10px;">
                        <div style="overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2;box-sizing: border-box;"><span v-if="shopid == 1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px!important;color: #fff;
    font-size: 10px;
    text-align: center;">自营</span><span style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;">{{v.goods_name}}</span></div>
                        <div style="margin: 5px 0;color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥<span style="color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;">{{v.price}}</span></div>
                        <div style="font-size: 11px;
    color: #82848a;
    margin: 10px 0;"><span style="margin-right: 10px!important;">{{v.buy_count}}人已购买</span><span>{{v.comment_num}}条评论</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!--热卖排行-->
        <div>
            <h2 style="margin: 5px;">热卖排行</h2>
            <div style="display:flex;justify-content: space-between;padding:5px 10px 0 10px;flex-wrap: wrap">
                <div style="width: 48%;
    background: #fff;
    overflow: hidden;
    margin: 5px 0;
    border-radius: 10px;font-size:14px" v-for="v in hot">
                    <div><img :src="v.thumbnail" alt="" style="width: 100%;"></div>
                    <div style="margin: 10px;">
                        <div style="overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2;box-sizing: border-box;"><span v-if="shopid == 1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px!important;color: #fff;
    font-size: 10px;
    text-align: center;">自营</span><span style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;">{{v.goods_name}}</span></div>
                        <div style="margin: 5px 0;color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥<span style="color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;">{{v.price}}</span></div>
                        <div style="font-size: 11px;
    color: #82848a;
    margin: 10px 0;"><span style="margin-right: 10px!important;">{{v.buy_count}}人已购买</span><span>{{v.comment_num}}条评论</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!--推荐商品-->
        <div style="margin-bottom: 60px">
            <h2 style="margin: 5px;">推荐商品</h2>
            <div style="display:flex;justify-content:space-between;padding:5px 10px 0 10px;flex-wrap: wrap">
                <div style="width: 48%;
    background: #fff;
    overflow: hidden;
    margin: 5px 0;
    border-radius: 10px;font-size:14px" v-for="v in rem">
                    <div><img :src="v.thumbnail" alt="" style="width: 100%;"></div>
                    <div style="margin: 10px;">
                        <div style="overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2;box-sizing: border-box;"><span v-if="shopid == 1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px!important;color: #fff;
    font-size: 10px;
    text-align: center;">自营</span><span style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;">{{v.goods_name}}</span></div>
                        <div style="margin: 5px 0;color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥<span style="color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;">{{v.price}}</span></div>
                        <div style="font-size: 11px;
    color: #82848a;
    margin: 10px 0;"><span style="margin-right: 10px!important;">{{v.buy_count}}人已购买</span><span>{{v.comment_num}}条评论</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import jsp from '../../../Api/Api'

    export default {
        name: "Homepage",
        data() {
            return {
                imglists: [],
                img: '',
                newa: [],
                shopid:'',
                hot:[],
                rem:[]
            }
        },
        created() {
            let a = this.$route.query.shop_id
            this.shopid = a
            // console.log(a)
            //轮播图
            jsp.shopImge(a).then(data => {
                // console.log(data.data)
                this.imglists = data.data
            })
            //新品
            jsp.shopNews(a).then(data => {
                // console.log(data.data)
                this.newa = data.data
            })
            //热卖
            jsp.shopHot(a).then(data => {
                console.log(data.data)
                this.hot = data.data
            })
            //推荐
            jsp.shopRecommend(a).then(data => {
                console.log(data.data)
                this.rem = data.data
            })
        },
        methods: {
            goodsMsg(v){
                console.log(v)
                this.$router.push({path:'/goods',query:{goods_id:v.goods_id}})
            }
        },
    }
</script>

<style scoped>
    .my-swipe .van-swipe-item {
        width: 95% !important;
        border-radius: 10px;
        overflow: hidden;
        margin: 10px auto;
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        /*background-color: #39a9ed;*/
    }

    h2 {
        font-size: 19px;
        font-weight: 600;
        text-align: center;
    }
</style>